<template>
    <div class="loginBoxWaike">
      <div class="loginBoxs">
        <div class="boxLeft">
          <h1 class="fontHt">欢迎回来!</h1>
          <span class="fontHt">一个不知道起什么名字的小破站</span>
        </div>
        <div class="boxRight">
          <div class="loginName">
            <span class="loginNameSpan" :class="{active:true}">账号登录</span>
            <div class="s"></div>
            <span class="loginNameSpan">账号注册</span>
          </div>
          <div class="fromBox">
            <label class="inputBox">
              <span class="fontHt inputSpan">账号</span>
              <input class="loginInput" type="text" name="userName" v-model.trim="userList.userName" @blur="yz">
            </label>
            <div class="zw"></div>
            <label class="inputBox">
              <span class="fontHt inputSpan">密码</span>
              <input  class="loginInput" ref="passWordType" type="password" name="userPassWord" v-model.trim="userList.userPassWord" @click.stop="" @blur="yz">
              <svg v-show="passWord" @click.stop="nonePassWord" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="eye" viewBox="0 0 16 16">
                <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
                <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
              </svg>
              <svg @click.stop="showPassWord" v-show="passWord2" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="eye" viewBox="0 0 16 16">
                <path d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z"/>
                <path d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z"/>
                <path d="M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12-.708.708z"/>
              </svg>
            </label>
          </div>
          <div class="BZDQSMMZ">
            <button type="button" @click="login" :class="{activeButton:isYes}" class="loginButton fontHt">登录</button>
          </div>
        </div>
<!--        <svg @click="closeBox" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="x-lg" viewBox="0 0 16 16">-->
<!--          <path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"/>-->
<!--        </svg>-->
      </div>
    </div>
</template>

<script setup>
import {onMounted, ref, watch} from "vue";
import API from "@/api/AxiosConfig";
import {useCookies} from "@vueuse/integrations/useCookies";
import {useStore} from "vuex";
// import router from "@/router";
import {useRouter} from "vue-router";

const store = useStore()
const cookie = useCookies()
const router = useRouter()
const userList = ref({
  userName:'',
  userPassWord:''
})
const loginBox = ref(false)
const passWordType = ref(null)
const passWord = ref(false)
const passWord2 = ref(true)
const isYes = ref(false)
const isToken = ref(false)

onMounted(() => {
  isToken.value = !cookie.get("user-token");
  setTimeout(() => {
    watch(()=>userList,()=>{
      yz()
    },{deep:true,immediate:true})
  },500)
})
function showPassWord() {
  passWordType.value.type = 'text'
  passWord2.value = false
  passWord.value = true
}
function nonePassWord() {
  passWordType.value.type = 'password'
  passWord2.value = true
  passWord.value = false
}
function yz() {
  if (userList.value.userName !== '' &&  userList.value.userPassWord !== '' &&
    userList.value.userName !== undefined &&  userList.value.userPassWord !== undefined){
    isYes.value = true
  }else {
    isYes.value = false
  }
}
function login() {
  console.log(1)
  if (userList.value.userName !== '' &&  userList.value.userPassWord !== '' &&
    userList.value.userName !== undefined &&  userList.value.userPassWord !== undefined){
    console.log(2)
    if (cookie.get('user-name') === undefined || cookie.get('user-token') === undefined){
      console.log(3)
      API.post('/api/login' , userList.value).then(res => {
        console.log(res.data.token)
        // let date=  new Date(new Date().getTime() + 60000000000)
        // document.cookie = 'user-token='+res.data.token+';expires=' + date.toUTCString()
        // document.cookie = 'user-name='+res.data.userId+';expires=' + date.toUTCString()
        cookie.set("user-token",res.data.token)
        cookie.set("user-name",res.data.userId)
        console.log(res.data.message)
        store.commit('setLoginIndex',false)
        if (res.data.message === '登陆成功'){
          router.push({path:'/adminI-AM-WASTE/videoList'})
        }
      }).catch(err => {

      })
    }else {
      console.log("请不要重复登陆")
    }

  }else {
    console.log('请输入账户，密码')
  }
}
</script>

<style lang="less" scoped>
input::-ms-clear, input::-ms-reveal {
  display: none;
}
.BZDQSMMZ{
  display: flex;
  justify-content: center;
  padding: 35px 0 ;
}
.loginButton{
  background: #00aeec;
  border-radius: 6px;
  outline: none;
  border: none;
  width: 45%;
  height: 45px;
  color: #FFFFFF;
  opacity: 0.5;
  cursor: not-allowed;
}
.s{
  width: 1px;
  height: 50px;
  background-color: #e3e5e7;
}
.loginName{
  display: flex;
  justify-content: center;
  margin-bottom: 35px;
  flex-wrap: wrap;
  align-content: center;
}
.loginNameSpan{
  font-size: 25px;
  margin: 6px 25px;
  cursor: pointer;
}
.x-lg{
  position: absolute;
  right: 20px;
  top: 20px;
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.eye{
  position: absolute;
  right: 15px;
  top: 30%;
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.inputBox{
  display: flex;
  position: relative;
}
.inputSpan{
  padding: 15px 5px 15px 20px;
}
.fromBox{
  display: flex;
  flex-direction: column;
  border: 1px solid #e3e5e7;
  border-radius: 8px;
  overflow: hidden;
  width: 70%;
  flex-shrink: 0;
}
.zw{
  width: 100%;
  height: 1px;
  background-color: #e3e5e7;
}
.loginInput{
  outline: none;
  padding: 5px 40px 5px 15px;
  border-radius: 4px;
  border: none;
  //width: 100%;
  height: 40px;
  flex: 1;
  font-size: 16px;
}
.loginBoxWaike{
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.3);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  overflow: hidden;
  justify-content: center;
  flex-wrap: wrap;
  display: flex;
  align-content: center;
}
.loginBoxs{
  width: 920px;
  height: 450px;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  background-color: #fff;
  position: relative;
}
.boxLeft{
  background-color: deeppink;
  flex: 2;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  flex-direction: column;
  text-align: center;
  color: #fff;
}
.boxRight{
  flex: 3;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  flex-direction: column;
}
.fontHt{
  font-family:黑体;
  font-weight: bold;
}
.activeButton{
  opacity: 1;
  cursor: pointer;
}
.active{
  color: #4fa5d9;
  cursor: not-allowed;
}
.but{
  font-weight: 600;
  background-color: #00a1d6;
  border: none;
  padding: 15px 15px;
  font-size: 20px;
  border-radius: 8px;
  width: 100%;
  position: relative;
}

</style>
